<template>
  <div v-if="bIsShow" class="reset-password-layout fixed-full item-show translucent">
    <div  class="reset-password-box">
      <h3 class="reset-password-box-title">
        <span>修改密码</span>
        <el-icon @click.stop="click2Show(false)"><close /></el-icon>
      </h3>

      <!-- tel -->
      <div class="reset-password-box-tel po-input po-input-left"
        :class="bIsTelTipsErr ? 'reset-password-box-err' : ''"
        :data-afterContent="telTipsErr">
          <input
            class="po-input-inner"
            v-focus
            v-model="tel"
            type="text"
            name="tel"
            placeholder="手机号码"
            @blur="check4Tel(tel)"
            @focus="bIsTelTipsErr=false">
          <span class="po-input-label">
            <el-icon><i class="jy-icon-phone"></i></el-icon>
          </span>
      </div>

      <!-- 动态密码 -->
      <div class="reset-password-box-dynamiccode"
        :class="bIsDynamicCodeTipsErr ? 'reset-password-box-err' : ''"
        :data-afterContent="dynamicCodeTipsErr">
          <div class="po-input">
            <input
              class="po-input-inner"
              v-model="dynamicCode"
              type="text"
              name="dynamicCode"
              placeholder="动态密码"
              @blur="check4DynamicCode(dynamicCode)"
              @focus="bIsDynamicCodeTipsErr=false">
          </div>
          <button type="button" name="getCode" @click.stop="click2GetDynamicCode">
            <span>{{strDynamicCodeTips}}</span>
          </button>
      </div>

      <!-- password -->
      <div class="reset-password-box-password po-input po-input-left"
        :class="bIsPasswordTipsErr ? 'reset-password-box-err' : ''"
        :data-afterContent="passwordTipsErr">
        <input
          class="po-input-inner"
          v-model="password"
          :type="bIsPasswordShow ? 'text' : 'password'"
          name="password"
          placeholder="请输入密码"
          @blur="check4Password(password)"
          @focus="bIsPasswordTipsErr=false">
        <span class="po-input-label" @click="bIsPasswordShow = !bIsPasswordShow">
          <i :class="bIsPasswordShow ? 'jy-icon-view' : 'jy-icon-preview'" style="font-size: 10px;"></i>
        </span>
      </div>

      <!-- 确认password -->
      <div class="reset-password-box-password2 po-input po-input-left"
        :class="bIsPassword2TipsErr?'reset-password-box-err':''"
        :data-afterContent="password2TipsErr">
        <input
          class="po-input-inner"
          v-model="password2"
          :type="bIsPassword2Show ? 'text' : 'password'"
          name="password2"
          placeholder="请再次确认密码"
          @blur="check4Password2(password2)"
          @focus="bIsPassword2TipsErr=false">
        <span class="po-input-label" @click="bIsPassword2Show = !bIsPassword2Show">
          <i :class="bIsPassword2Show ? 'jy-icon-view' : 'jy-icon-preview'" style="font-size: 10px;"></i>
        </span>
      </div>

      <!-- 图片随机验证码 -->
      <div class="reset-password-box-verifycode"
        :class="bIsVerifyCodeTipsErr ? 'reset-password-box-err' : ''"
        :data-afterContent="verifyCodeTipsErr">
          <div class="po-input">
            <input
              class="po-input-inner"
              v-model="verifyCode"
              type="text"
              name="verifyCode"
              placeholder="图片验证码"
              @blur="check4VerifyCode(verifyCode)"
              @focus="bIsVerifyCodeTipsErr=false">
          </div>

          <div class="po-img" @click.stop="getVerifyCode">
            <span>
              <img :src="verifyCodePic" alt="">
            </span>
          </div>
      </div>

      <!-- 确认更改 -->
      <div class="reset-password-box-reset">
        <button type="button" name="reset" @click.stop="click2Confirm">
          <span>确认更改</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/utils/'
import { useWebUserStore } from '@/store/web/user'

  export default {
    name: 'ResetPasswordLayout',
    data () {
      return {
        bIsShow: false,

        /* tel */
        tel: '',
        bIsTelTipsErr: false,
        telTipsErr: '',

        /* verifyCode */
        verifyCode: '',
        bIsVerifyCodeTipsErr: false,
        verifyCodeTipsErr: '',
        verifyCodePic: '',

        /* dynamicCode */
        dynamicCode: '',
        bIsDynamicCodeTipsErr: false,
        dynamicCodeTipsErr: '',
        strDynamicCodeTips: '发送动态密码',
        canSendCode: true,
        codeCount: 0,
        codeTimeiv: null,

        /* password */
        password: '',
        bIsPasswordTipsErr: false,
        passwordTipsErr: '',
        bIsPasswordShow: false,

        /* password2 */
        password2: '',
        bIsPassword2TipsErr: false,
        password2TipsErr: '',
        bIsPassword2Show: false,
      }
    },
    directives: {
      focus: {
        inserted: function(el) {
          el.focus();
        }
      }
    },
    created() {
      // 初始化 verifyCodePic
      this.getVerifyCode();
    },
    mounted() {
      EventBus.$on('ReserPasswordLayoutShow', (bool) => { this.click2Show(bool) });
      // 注意⚠️：调用 EventBus.$emit('ReserPasswordLayoutShow', true); 展示
    },
    methods: {
      click2Show(bool) {
        // 注册面板开关
        this.bIsShow = bool;
        // this.$emit("close", false);
        // EventBus.$emit('ReserPasswordLayoutShow', true);
      },

      check4Tel(val) {
        if(!this.telReg(val)) {
          this.bIsTelTipsErr = true;
          this.telTipsErr = '手机号码格式不正确';
        }
      },
      check4VerifyCode(val) {
        if (val) {
          this.bIsVerifyCodeTipsErr = false;
          this.verifyCodeTipsErr = "";
        } else {
          this.bIsVerifyCodeTipsErr = true;
          this.verifyCodeTipsErr = "验证码不正确";
        }
      },
      check4DynamicCode(val) {
        if (val) {
          this.bIsDynamicCodeTipsErr = false;
          this.dynamicCodeTipsErr = "";
        } else {
          this.bIsDynamicCodeTipsErr = true;
          this.dynamicCodeTipsErr = "手机验证码不正确";
        }
      },
      check4Password(val) {
        if(val) {
          this.bIsPasswordTipsErr = false;
          this.passwordTipsErr = '';
        }
        else {
          this.bIsPasswordTipsErr = true;
          this.passwordTipsErr = '密码不正确';
        }
      },
      check4Password2(val) {
        if(val && val == this.password) {
          this.bIsPassword2TipsErr = false;
          this.password2TipsErr = '';
          return true;
        }
        else {
          this.bIsPassword2TipsErr = true;
          this.password2TipsErr = '再次确认密码不正确';
          return false;
        }
      },

      telReg(val) {
        // 校验手机号码
        let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        return reg.test(val);
      },
      passwordReg(val) {
        return !!val;
      },
      dynamicCodeReg(val) {
        return !!val;
      },
      verifyCodeReg(val) {
        return !!val;
      },

      getVerifyCode() {
        const timestamp = new Date().valueOf();
        this.verifyCodePic = this.env.apiUrl + '/login/vcode?' + timestamp;
      },
      click2GetDynamicCode() {
        let that = this;
        if(!that.telReg(that.tel)) {
          if(!that.telReg(that.tel)) {
            that.check4Tel(that.tel);
          }

          return;
        }

        if (that.canSendCode && that.telReg(that.tel)) {
          // 手机号正确&&可发送验证码短信
          // TODO: post4DynamicCode
          that.post4DynamicCode();

          // count down, codeTimeiv 需要在 beforeUnmount 的时候 clearInterval
          that.codeCount = 5;  // 90
          if (that.codeTimeiv) clearInterval(that.codeTimeiv);
          that.codeTimeiv = setInterval(function() {
            that.strDynamicCodeTips = "重新发送(" + that.codeCount + "s)";
            that.codeCount--;
            if (that.codeCount < 0) {
              that.strDynamicCodeTips = "发送动态密码";
              clearInterval(that.codeTimeiv);
            }
          }, 1000);
        }
      },
      post4DynamicCode() {
        let that = this;
        let params = {
          phone: this.tel
        };
        const useWebUser = useWebUserStore()
        useWebUser.getTelCode(params, res => {
          // console.log(res);
          if (1 == res.code) {
            that.bIsTelTipsErr = true;
            that.telTipsErr = res.msg;
          }
          else if (0 == res.code) {
            // success
            that.bIsTelTipsErr = false;
          }
        });
      },
      click2Confirm() {
        let that = this;
        if (!that.telReg(that.tel) ||
          !that.dynamicCodeReg(that.dynamicCode) ||
          !that.passwordReg(that.password) ||
          !that.passwordReg(that.password2) ||
          that.password != that.password2 ||
          !that.verifyCodeReg(that.verifyCode)) {
            if(!that.telReg(that.tel)) {
              that.check4Tel(that.tel);
            }
            if(!that.dynamicCodeReg(that.dynamicCode)) {
              that.check4DynamicCode(that.dynamicCode);
            }
            if(!that.passwordReg(that.password)) {
              that.check4Password(that.password);
            }
            if(!that.passwordReg(that.password2) || that.password != that.password2) {
              that.check4Password2(that.password2);
            }
            if(!that.verifyCodeReg(that.verifyCode)) {
              that.check4VerifyCode(that.verifyCode);
            }

            // 成不成功，都刷新验证码
            this.getVerifyCode();

            return;
        }

        let params = {
          phone: this.tel,  // 手机号码
          vcode: this.dynamicCode,  // 手机动态密码
          code: this.verifyCode,  // 验证码
          pwd: that.password,  // 密码
          pwd1: that.password2,  // 确认密码
          callback: this.loginCallback
        };
        const useWebUser = useWebUserStore()
        useWebUser.resetPassword(params)
      },
      loginCallback(res) {
        let that = this;

        // 成不成功，都刷新验证码
        this.getVerifyCode();

        if (0 == res.code) {
          that.bIsTelTipsErr = false;
          that.bIsVerifyCodeTipsErr = false;
          that.bIsDynamicCodeTipsErr = false;
          that.bIsPasswordTipsErr = false;
          that.bIsPassword2TipsErr = false;
          this.$message(res.msg);
          this.$message('请您重新登录！');
          that.click2Show(false);
        }
        else if (900003 == res.code) {
          that.bIsTelTipsErr = true;
          that.telTipsErr = res.msg;
        }
        else if (1 == res.code) {
          that.bIsTelTipsErr = true;
          that.telTipsErr = res.msg;
        }
        else if (910005 == res.code) {
          that.bIsDynamicCodeTipsErr = true;
          that.dynamicCodeTipsErr = res.msg;
        }
        else if (910008 == res.code) {
          that.bIsVerifyCodeTipsErr = true;
          that.verifyCodeTipsErr = res.msg;
        }
        else if (900106 == res.code) {
          that.bIsTelTipsErr = true;
          that.telTipsErr = res.msg;
        }
        // else if (910003 == res.code) {}
      },
    },
    watch: {
      codeCount() {
        if(this.codeCount > 0) {
          this.canSendCode = false;
        }
        else {
          this.canSendCode = true;
        }
      },
    },
    beforeUnmount() {
      let that = this;

      // clearInterval codeTimeiv
      if(that.codeTimeiv) clearInterval(that.codeTimeiv);
    },
  }
</script>

<style lang="scss">
  @import "@/assets/scss/common.scss";
  .reset-password-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }
  .reset-password-box {
    position: relative;
    box-sizing: border-box;
    width: 422px;
    height: 538px;
    background-color: #fff;
    border: 1px solid #a5afbe;
    border-radius: 2px;
    padding: 30px 35px;

    .reset-password-box-title {
      font-size: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      span {
        font-size: 30px;
        color: #43475c;
        font-weight: bold;
      }

      i {
        color: #aaaaaa;
      }
    }

    .reset-password-box-tel {
      margin-bottom: 18px;
      background-color: #f3f5fa;
    }
    .reset-password-box-err {
      color: #f8633b;
    }
    .reset-password-box-err::after {
      position: absolute;
      font-size: 12px;
      bottom: -15px;
      color: #f8633b;
      content: attr(data-afterContent);
    }

    .reset-password-box-dynamiccode {
      position: relative;
      height: 46px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;

      .po-input {
        width: 230px;
        background-color: #f3f5fa;
      }

      button {
        outline: none;
        border-radius: 4px;
        border: 1px solid #a5afbe;
        background-color: inherit;
        background-image: none;
        width: 110px;
        height: 100%;
        font-size: 14px;
        color: #a5afbe;
      }
    }

    .reset-password-box-verifycode{
      position: relative;
      height: 46px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;

      .po-input {
        width: 110px;
        background-color: #f3f5fa;
      }

      .po-img {
        width: 230px;
        height: 100%;
        cursor: pointer;

        span {
          display: block;
          width: 100%;
          height: 100%;

          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      button {
        outline: none;
        border-radius: 4px;
        border: 1px solid #a5afbe;
        background-color: inherit;
        background-image: none;
        width: 160px;
        height: 100%;
        font-size: 14px;
        color: #a5afbe;
      }
    }

    .reset-password-box-password, .reset-password-box-password2 {
      margin-bottom: 18px;
      background-color: #F3F5FA;
    }

    .reset-password-box-reset {
      position: relative;
      height: 46px;
      background: #127bff;
      border-radius: 4px;

      button {
        outline: none;
        border-radius: 4px;
        border: none;
        background-color: inherit;
        background-image: none;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: #fff;
      }
    }
  }

  .po-input{
    position: relative;
    display: flex;
    font-size: 14px;
    width: 100%;
    height: 46px;
    color: #606266;

    input.po-input-inner{
      display: inline-block;
      padding: 0 15px;
      min-width: 0;
      flex: 1;
      // width: 100%;
      // line-height: 40px;
      color: inherit;
      -webkit-appearance: none;
      outline: none;
      box-sizing: border-box;
      font-size: inherit;
      background-color: inherit;
      background-image: none;
      border-radius: 4px;
      border: none;
      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    span.po-input-label{
      position: absolute;
      height: 100%;
      top: 0;
      color: inherit;
      display: flex;
      align-items: center;

      i{
        font-size: 20px;
      }
    }
  }
  .po-input-left{
    input.po-input-inner{
      padding-left: 30px;
    }

    span.po-input-label{
      left: 5px;
    }
  }
  .po-input-right{
    input.po-input-inner{
      padding-right: 30px;
    }

    span.po-input-label{
      right: 5px;
    }
  }
</style>
